/* SPDX-License-Identifier: Apache-2.0 */

/*
  An accordion that opens and closes
  Initialise the component in either a closed or open state, and JS will do the rest:

  Closed state:
  <div class="accordion accordion--closed">
    <a class="accordion__link -js-expander-trigger" aria-expanded="false" aria-controls="my-accordion-content">Trigger</a>
    <div id="my-accordion-content" class="accordion__content" aria-hidden="true">
      // Content to show and hide here
    </div>
  </div>

  Open state:
  <div class="accordion">
    <a class="accordion__link -js-expander-trigger" aria-expanded="true" aria-controls="my-accordion-content">Trigger</a>
    <div id="my-accordion-content" class="accordion__content" aria-hidden="false">
      // Content to show and hide here
    </div>
  </div>
*/

.accordion {
  margin-top: 10px;

  &__link {
    padding: 5px;
    display: block;
    cursor: pointer;
    border: 0;
    background-color: transparent;
    color: $primary-color;
    @include link-without-underline;

    &::before {
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      content: "\f139";
      margin-right: $half-spacing-unit #{"/*rtl:5px*/"};
    }

    @media only screen and (max-width: $desktop) {
      color: $white;
      @include link-focus-state($white);
    }
  }

  &__content {
    padding: 0 0 5px;

    a {
      display: block;
      margin-right: 10px;
    }
  }

  &--closed {
    .accordion__content {
      display: none;
    }

    .accordion__link {
      &::before {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f13a";
      }
    }
  }
}
